<template>
	<div class="home" @click="hides">
		<baidu-map class="map" id="container" :center="center" :continuous-zoom="true" :double-click-zoom="false"
			:scroll-wheel-zoom="true" :zoom="zoom" @ready="handler" />

		<div class="content">
			<div class="header">
				<div class="weather">
					<!-- <img src="../../assets/images/icon_03.png" />-->
					<span>{{weather.text}} {{weather.low}}℃~{{weather.high}}℃</span>
				</div>
				<p>北门口社区“一核六智”平台</p>
				<!--<em>2023年10月29日 星期日<i>13:49:58</i></em>-->
				<em>{{now}} {{week}}<i>{{time}}</i></em>
			</div>
			<div class="boxs">
				<div class="main_labels">
					<div class="item">
						<div class="head">
							<p>居民年龄段</p>
							<p>居民年龄段</p>
						</div>
						<div class="box box1" id="box1">

						</div>
					</div>
					<div class="item">
						<div class="head">
							<p>社区服务</p>
							<p>社区服务</p>
						</div>
						<div class="box box2">
							<ul>
								<li v-for="(item, index) in tabbar" :class="index == current?'on':''"
									@click="tabbars(index)">{{item}}
								</li>
							</ul>
							<div class="data" v-show="current == 0" id="box2"></div>
							<div class="data" v-show="current == 1" id="box22"></div>
							<em v-show="current == 0">处理总件数：{{ContradictionCount}}件</em>
							<em v-show="current == 1">办理总件数：{{HandlingCount}}件</em>
						</div>
					</div>
				</div>
				<div class="main_midden">
					<div class="ts">
						<div class="item">
							<div class="top">
								<div class="icon">
									<img src="../../assets/images/icon_10.png" />
									<div class="lt"></div>
									<div class="rt"></div>
									<div class="lb"></div>
									<div class="rb"></div>
								</div>
								<div class="font">
									<p>智能手环总数</p>
									<span>{{Wristband.total}}</span>
									<div class="lt"></div>
									<div class="rt"></div>
									<div class="lb"></div>
									<div class="rb"></div>
								</div>
							</div>
							<ul>
								<li class="on">
									<div class="line on" :class="flag1?'ons':''" @click.stop="change('flag1')">
										<img src="../../assets/images/icon_19.png" />
										<span>高压异常：{{Wristband.highPressure}}</span>
									</div>
									<div class="slidebox" v-if="flag1">
										<div class="close" @click="close"></div>
										<div class="heads">
											<img src="../../assets/images/icon_19.png" />
											<span>血压异常数据</span>
										</div>
										<div class="tab">
											<div class="t">
												<p>佩戴人</p>
												<p>编号</p>
												<p>血压</p>
											</div>
											<div class="slie">
												<em class="null" v-if="Dispose.length==0">暂无数据</em>
												<div class="lab" v-for="v in Dispose">
													<p>{{v.name}}</p>
													<p>{{v.number}}</p>
													<p>{{v.data}}mmHg</p>
												</div>
											</div>
										</div>
									</div>
								</li>
								<li class="on">
									<div class="line" :class="flag2?'ons':''" @click.stop="change('flag2')">
										<img src="../../assets/images/icon_291.png" />
										<span>低压异常：{{Wristband.lowVoltage}}</span>
									</div>
									<div class="slidebox" v-if="flag2">
										<div class="close" @click="close"></div>
										<div class="heads">
											<img src="../../assets/images/icon_291.png" />
											<span>血糖异常数据</span>
										</div>
										<div class="tab">
											<div class="t">
												<p>佩戴人</p>
												<p>编号</p>
												<p>血压</p>
											</div>
											<div class="slie">
												<em class="null" v-if="Dispose.length==0">暂无数据</em>
												<div class="lab" v-for="v in Dispose">
													<p>{{v.name}}</p>
													<p>{{v.number}}</p>
													<p>{{v.data}}mmHg</p>
												</div>
											</div>
										</div>
									</div>
								</li>
								<li class="on">
									<div class="line" :class="flag3?'ons':''" @click.stop="change('flag3')">
										<img src="../../assets/images/icon_29.png" />
										<span>心率异常：{{Wristband.heartRate}}</span>
									</div>
									<div class="slidebox" v-if="flag3">
										<div class="close" @click="close"></div>
										<div class="heads">
											<img src="../../assets/images/icon_29.png" />
											<span>心率异常数据</span>
										</div>
										<div class="tab">
											<div class="t">
												<p>佩戴人</p>
												<p>编号</p>
												<p>心率</p>
											</div>
											<div class="slie">
												<em class="null" v-if="Dispose.length==0">暂无数据</em>
												<div class="lab" v-for="v in Dispose">
													<p>{{v.name}}</p>
													<p>{{v.number}}</p>
													<p>{{v.data}}</p>
												</div>
											</div>
										</div>
									</div>
								</li>
							</ul>
							<div class="lines">
								<div class="d"></div>
								<div class="dd"></div>
								<div class="l"></div>
								<div class="dd"></div>
								<div class="d"></div>
							</div>
						</div>
						<div class="item">
							<div class="top">
								<div class="icon">
									<img src="../../assets/images/icon_13.png" />
									<div class="lt"></div>
									<div class="rt"></div>
									<div class="lb"></div>
									<div class="rb"></div>
								</div>
								<div class="font">
									<p>烟感器总数</p>
									<span>{{SmokeSensor.total || 0}}</span>
									<div class="lt"></div>
									<div class="rt"></div>
									<div class="lb"></div>
									<div class="rb"></div>
								</div>
							</div>
							<ul>
								<li>
									<div class="line" :class="flag4?'ons1':''" @click.stop="change('flag4')">
										<img src="../../assets/images/icon_24.png" />
										<span>已处理报警：{{SmokeSensor.handled || 0}}</span>
									</div>
									<div class="slidebox right on" style="padding-right: .38rem;" v-if="flag4">
										<div class="close" @click="close"></div>
										<div class="heads">
											<img src="../../assets/images/icon_24.png" />
											<span>烟感器已处理报警</span>
										</div>
										<div class="tab">
											<div class="t s">
												<p style="width: .6rem;">姓名</p>
												<p style="width: .9rem;">联系电话</p>
												<p style="width: calc((100% - 1.5rem)/2);">报警时间</p>
												<p style="width: calc((100% - 1.5rem)/2);">处理时间</p>
											</div>
											<div class="slie1">
												<em class="null" v-if="Dispose.length==0">暂无数据</em>
												<div class="lab" v-for="v in Dispose">
													<p>{{v.name}}</p>
													<p>{{v.phone}}</p>
													<p>{{v.alarmTime.substring(5,16)}}</p>
													<p>{{v.disposeTime.substring(5,16)}}</p>
												</div>
											</div>
										</div>
									</div>
								</li>
								<li class="on">
									<div class="line" :class="flag5?'ons':''" @click.stop="change('flag5')">
										<img src="../../assets/images/icon_26.png" />
										<span>未处理报警：{{SmokeSensor.unhandled || 0}}</span>
									</div>
									<div class="slidebox right on1" v-if="flag5">
										<div class="close" @click="close"></div>
										<div class="heads">
											<img src="../../assets/images/icon_26.png" />
											<span>烟感器未处理报警</span>
										</div>
										<div class="tab">
											<div class="t">
												<p>姓名</p>
												<p>联系电话</p>
												<p>报警时间</p>
											</div>
											<div class="slie">
												<em class="null" v-if="Dispose.length==0">暂无数据</em>
												<div class="lab" v-for="v in Dispose">
													<p>{{v.name}}</p>
													<p>{{v.phone}}</p>
													<p>{{v.alarmTime.substring(5,16)}}</p>
												</div>
											</div>
										</div>
									</div>
								</li>
							</ul>
							<div class="lines">
								<div class="d"></div>
								<div class="dd"></div>
								<div class="l"></div>
								<div class="dd"></div>
								<div class="d"></div>
							</div>
						</div>
					</div>
					<!-- 手环异常警报弹窗 -->
					<div class="ycs" v-if="showError1">
						<div class="close" @click="showError1=false"></div>
						<div class="tit">
							<p>手环异常警报</p>
						</div>
						<table border="0" cellspacing="0" cellpadding="0">
							<tr>
								<th>佩戴人</th>
								<th>联系电话</th>
								<th>异常数据</th>
								<th>负责网格员</th>
								<th>联系电话</th>
							</tr>
							<tr>
								<td>李四</td>
								<td>13522265411</td>
								<td><span>血压过高</span>（160mmHg）</td>
								<td>王五</td>
								<td>13012265411</td>
							</tr>
						</table>
					</div>
					<!-- 烟感器警报弹窗 -->
					<div class="ycs on" v-if="showError2">
						<div class="close" @click="showError2=false"></div>
						<div class="tit">
							<p>烟感器警报</p>
						</div>
						<table border="0" cellspacing="0" cellpadding="0">
							<thead>
								<tr>
									<th class="name">姓名1</th>
									<th class="phone">联系电话</th>
									<th>地址</th>
									<th class="alarmTime">警报时间</th>
									<th>负责网格员</th>
									<th class="phone">联系电话</th>
								</tr>
							</thead>
							<tbody class="mybody">
								<tr v-for="v in popUps">
									<td class="name">{{v.name}}</td>
									<td class="phone">{{v.phone}}</td>
									<el-tooltip :content="v.address" placement="top">
										<td>
											{{v.address}}
										</td>
									</el-tooltip>
									<td class="alarmTime">{{v.alarmTime}}</td>
									<td>{{v.gridManager}}</td>
									<td class="phone">{{v.contactNumber}}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="main_labels">
					<div class="item">
						<div class="head">
							<p>特殊群体</p>
							<p>特殊群体</p>
						</div>
						<div class="box box3" id="box3">

						</div>
					</div>
					<div class="item">
						<div class="head">
							<p>人员流动变化</p>
							<p>人员流动变化</p>
						</div>
						<div class="box box4" id="box4">

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	import api from '@/api/protal'
	export default {
		name: 'index',
		data() {
			return {
				flag1: false,
				flag2: false,
				flag3: false,
				flag4: false,
				flag5: false,
				center: {
					lng: 105.285264,
					lat: 29.352562
				},
				zoom: 18,
				tabbar: ['社区矛盾纠纷处理', '社区服务办理'],
				current: 0,
				now: '',
				time: '',
				week: '',
				SmokeSensor: {},
				Dispose: [],
				Wristband: {},
				showError1: false,
				error1: [],
				showError2: false,
				error2: [],
				// 烟感器报警
				popUps: [],
				HandlingCount: 0,
				ContradictionCount: 0,
				weather: {}
			}
		},
		created: function() {
			var that = this;
			this.getData()
			that.getPupData()
			setInterval(function() {

				var date = new Date();
				var weekDay = date.getDay();
				var year = date.getFullYear(); //获取年份
				var month = date.getMonth() + 1; //获取月份
				var day = date.getDate(); //获取日期
				var hours = date.getHours(); //获取小时
				var minutes = date.getMinutes(); //获取分钟
				var seconds = date.getSeconds(); //获取秒钟
				that.now = year + "年" + (month < 10 ? '0' + month : month) + "月" + (day < 10 ? '0' + day :
					day) + "日 "; //拼接时间字符串
				that.time = (hours < 10 ? '0' + hours : hours) + ":" + (minutes < 10 ? '0' + minutes :
					minutes) + ":" + (seconds < 10 ? '0' + seconds : seconds);
				that.week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][weekDay]
			}, 1000)
		},
		mounted() {
			let that = this
			this.$nextTick(() => {
				this.initChart();
				window.addEventListener("resize", function() {
					that.myChart22.resize();
					that.myChart2.resize();
					that.myChart3.resize();
					that.myChart4.resize();
					that.myChart1.resize();
				});
			});
		},
		methods: {
			getPupData() {
				let that = this
				// 烟感报警弹窗
				if (!that.showError2) {
					api.getpopUps().then(r => {
						console.log(r)
						if (r.length > 0) {
							that.popUps = r
							that.showError2 = true
							setTimeout(function() {
								that.popUps = []
								that.showError2 = false
							}, 3000);
						}
					})
				}
				setTimeout(() => {
					that.getPupData()
				}, 10000)
			},
			getData() {
				let that = this
				// 获取手环信息接口
				api.getWristband().then(r => {
					console.log(r)
					this.Wristband = r
				})
				// 获取天气接口
				api.getWeather().then(r => {
					this.weather = r
				})
				// 获取烟感信息接口
				api.getSmokeSensor().then(r => {
					this.SmokeSensor = r
				})
				this.getResidentAge()
				this.getContradictionCount()
				this.getHandlingCount()
				this.getPopulationMobility()
				setTimeout(() => {
					that.getData()
				}, 60000)
			},
			// 获取处理社区服务统计信息接口
			getHandlingCount() {
				let that = this
				api.getHandlingCount().then(r => {
					this.HandlingCount = r.total
					that.$nextTick(n => {
						var dom22 = document.getElementById("box22");
						var option11 = {
							tooltip: {
								trigger: "axis",
								backgroundColor: '#fff',
								textStyle: {
									color: "#fff"
								},
								axisPointer: {
									type: "shadow",
									textStyle: {
										color: "#fff"
									}
								},
								formatter: (params) => {
									let res = '<p style="color: #333;">' + params[0].seriesName +
										'</p><h3 style="font-size:14px;line-height:14px;margin-top:13px;color:#333;"><span style="width:6px;height:6px;border-radius:50%;background:#066BC8;margin-top: -6x;display: inline-block;margin: 3px;"></span>' +
										params[0].axisValue + ':&nbsp;&nbsp;&nbsp;' + params[0]
										.data + '件</h3>'
									return res
								}
							},
							dataZoom: [{
									orient: 'horizontal',
									show: true, //控制滚动条显示隐藏
									realtime: true, //拖动滚动条时是否动态的更新图表数据
									height: 15, //滚动条高度
									startValue: 0, //滚动条开始位置（共100等份）
									endValue: 5,
									bottom: '2%',
								},
								{
									type: 'inside',
									brushSelect: true,
									startValue: 0,
									endValue: 12,
									xAxisIndex: [0],
								}

							],
							grid: {
								borderWidth: 0,
								top: '18%',
								right: '5%',
								bottom: '15%',
								textStyle: {
									color: "#fff"
								}
							},
							calculable: true,
							xAxis: [{
								type: "category",
								splitLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								splitArea: {
									show: false
								},
								axisLabel: {
									interval: 0,
									// rotate: 50,
									textStyle: {
										color: '#fff',
										fontSize: '12px'
									}
								},
								axisLine: {
									show: false,
									lineStyle: {
										color: '#ffffff'
									}
								},
								data: r.monthValueVOList.map(d => {
									return d.month
								})
							}],
							yAxis: {
								type: 'value',
								name: '件数（件）',
								nameTextStyle: {
									color: '#fff',
									fontSize: 12
								},
								axisLine: {
									lineStyle: {
										color: 'rgba(255, 255, 255, 0.4)',
										width: 1,
										type: 'solid'
									},
									show: true
								},
								splitLine: {
									show: true,
									lineStyle: {
										color: 'rgba(255, 255, 255, 0.4)',
										type: 'dashed'
									}
								},
								axisLabel: {
									textStyle: {
										color: '#fff',
										fontSize: '13px'
									}
								},
								axisTick: {
									show: false
								}
							},

							series: [{
									name: "办理件数",
									type: "bar",
									stack: "总量",
									barMaxWidth: 16,
									barGap: "10%",
									itemStyle: {
										normal: {
											show: true,
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
												[{
													offset: 0,
													color: 'rgba(6, 124, 226, 0.83)'
												}, {
													offset: 1,
													color: 'rgba(6, 124, 226, 0.31)'
												}], false),
											barBorderRadius: 0,
											label: {
												show: true,
												position: "top",
												color: 'rgba(39, 252, 254, 1)',
												formatter: function(p) {
													return p.value > 0 ? (p.value) : '';
												}
											}
										},
									},
									data: r.monthValueVOList.map(d => {
										return d.value
									})
								},
								// {
								// 	name: "",
								// 	type: "bar",
								// 	stack: "总量",
								// 	barMaxWidth: 16,
								// 	barGap: "10%",
								// 	itemStyle: {
								// 		normal: {
								// 			show: true,
								// 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
								// 		[{
								// 				offset: 0,
								// 				color: 'rgba(39, 252, 254, 1)'
								// 			}, {
								// 				offset: 1,
								// 				color: 'rgba(39, 252, 254, 1)'
								// 			}], false),
								// 			barBorderRadius: 0,

								// 		},
								// 	},
								// 	data:  r.map(d => {
								// 		return 0.05
								// 	})
								// },
								{
									// 分隔
									type: "pictorialBar",
									tooltip: {
										show: false,
									},
									symbolRotate: "-45",
									itemStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
												[{
														offset: 0,
														color: "rgba(6, 124, 226, 0.31)",
													},
													{
														offset: 1,
														color: "rgba(255, 255, 255, 0.31)",
													},
												]),
										},
									},

									symbolRepeat: "fixed",
									symbolMargin: -10,
									symbol: "rect",
									symbolClip: true,
									symbolSize: [2, 25],
									symbolPosition: "start",
									symbolOffset: [-1, 10],
									data: r.monthValueVOList.map(d => {
										return d.value
									}),
									z: 66,
									animationEasing: "elasticOut",
								}
							]
						};

						that.myChart22 = echarts.init(dom22);
						that.myChart22.setOption(option11)


					})
				})
			},
			// 获取矛盾纠纷统计信息接口
			getContradictionCount() {
				let that = this
				api.getContradictionCount().then(r => {
					that.ContradictionCount = r.total
					that.$nextTick(n => {
						var dom2 = document.getElementById("box2");
						var option1 = {
							tooltip: {
								trigger: "axis",
								backgroundColor: '#fff',
								textStyle: {
									color: "#fff"
								},
								axisPointer: {
									type: "shadow",
									textStyle: {
										color: "#fff"
									}
								},
								formatter: (params) => {
									let res = '<p style="color: #333;">' + params[0].seriesName +
										'</p><h3 style="font-size:14px;line-height:14px;margin-top:13px;color:#333;"><span style="width:6px;height:6px;border-radius:50%;background:#066BC8;margin-top: -6x;display: inline-block;margin: 3px;"></span>' +
										params[0].axisValue + ':&nbsp;&nbsp;&nbsp;' + params[0]
										.data + '件</h3>'
									return res
								}
							},
							dataZoom: [{
									orient: 'horizontal',
									show: true, //控制滚动条显示隐藏
									realtime: true, //拖动滚动条时是否动态的更新图表数据
									height: 15, //滚动条高度
									startValue: 0, //滚动条开始位置（共100等份）
									endValue: 5,
									bottom: '2%',
								},
								{
									type: 'inside',
									brushSelect: true,
									startValue: 0,
									endValue: 12,
									xAxisIndex: [0],
								}

							],
							grid: {
								borderWidth: 0,
								top: '18%',
								right: '5%',
								bottom: '15%',
								textStyle: {
									color: "#fff"
								}
							},
							calculable: true,
							xAxis: [{
								type: "category",
								splitLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								splitArea: {
									show: false
								},
								axisLabel: {
									interval: 0,
									// rotate: 50,
									textStyle: {
										color: '#fff',
										fontSize: '12px'
									}
								},
								axisLine: {
									show: false,
									lineStyle: {
										color: '#ffffff'
									}
								},
								data: r.monthValueVOList.map(d => {
									return d.month
								})
							}],
							yAxis: {
								type: 'value',
								name: '件数（件）',
								nameTextStyle: {
									color: '#fff',
									fontSize: 12
								},
								axisLine: {
									lineStyle: {
										color: 'rgba(255, 255, 255, 0.4)',
										width: 1,
										type: 'solid'
									},
									show: true
								},
								splitLine: {
									show: true,
									lineStyle: {
										color: 'rgba(255, 255, 255, 0.4)',
										type: 'dashed'
									}
								},
								axisLabel: {
									textStyle: {
										color: '#fff',
										fontSize: '13px'
									}
								},
								axisTick: {
									show: false
								}
							},

							series: [{
									name: "办理件数",
									type: "bar",
									stack: "总量",
									barMaxWidth: 16,
									barGap: "10%",
									itemStyle: {
										normal: {
											show: true,
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
												[{
													offset: 0,
													color: 'rgba(6, 124, 226, 0.83)'
												}, {
													offset: 1,
													color: 'rgba(6, 124, 226, 0.31)'
												}], false),
											barBorderRadius: 0,
											label: {
												show: true,
												position: "top",
												color: 'rgba(39, 252, 254, 1)',
												formatter: function(p) {
													return p.value > 0 ? (p.value) : '';
												}
											}
										},
									},
									data: r.monthValueVOList.map(d => {
										return d.value
									})
								}, {
									name: "",
									type: "bar",
									stack: "总量",
									barMaxWidth: 16,
									barGap: "10%",
									itemStyle: {
										normal: {
											show: true,
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
												[{
													offset: 0,
													color: 'rgba(39, 252, 254, 1)'
												}, {
													offset: 1,
													color: 'rgba(39, 252, 254, 1)'
												}], false),
											barBorderRadius: 0,

										},
									},
									data: r.monthValueVOList.map(d => {
										return 0.05
									})
								},
								{
									// 分隔
									type: "pictorialBar",
									tooltip: {
										show: false,
									},
									symbolRotate: "-45",
									itemStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
												[{
														offset: 0,
														color: "rgba(6, 124, 226, 0.31)",
													},
													{
														offset: 1,
														color: "rgba(255, 255, 255, 0.31)",
													},
												]),
										},
									},

									symbolRepeat: "fixed",
									symbolMargin: -10,
									symbol: "rect",
									symbolClip: true,
									symbolSize: [2, 25],
									symbolPosition: "start",
									symbolOffset: [-1, 10],
									data: r.monthValueVOList.map(d => {
										return d.value
									}),
									z: 66,
									animationEasing: "elasticOut",
								}
							]
						};

						that.myChart2 = echarts.init(dom2);
						that.myChart2.setOption(option1)
					})
				})

			},
			// 获取人口流动信息
			getPopulationMobility() {
				api.getPopulationMobility().then(r => {
					this.$nextTick(n => {
						var dom4 = document.getElementById("box4");
						// 444
						var getnhname = [];
						var getnhvalue = [];
						if (r.inflowPopulation) {
							getnhname.push('流入人数')
							getnhvalue.push(r.inflowPopulation)
						}
						if (r.outflowPopulation) {
							getnhname.push('流出人数')
							getnhvalue.push(r.outflowPopulation)
						}
						var getflname = getnhname;
						var getflvalue = getnhvalue;
						// 圆环值
						var data1a = [];
						for (var i = 0; i < getflname.length; i++) {
							data1a.push({
								name: getflname[i],
								value: getflvalue[i]
							})
						}

						// 环内
						var data2a = [];
						for (var i = 0; i < getnhname.length; i++) {
							data2a.push({
								name: getnhname[i],
								value: getnhvalue[i]
							})
						}

						// 圆环颜色
						var color = ['#EA6D6C', '#499FF9', '#25CF9A', '#8F81FF', '#849EF2', '#FFCC85']
						// 内环边框
						var innerColor = ['#FF2395', '#00A8FF']
						var dataConsump = [];
						var dataType = []

						for (var i = 0; i < data1a.length; i++) {
							dataConsump.push({
								value: data1a[i].value,
								name: data1a[i].name,
							});
						}
						for (let i = 0; i < data2a.length; i++) {
							dataType.push({
								name: data2a[i].name,
								value: data2a[i].value,
								itemStyle: {
									shadowBlur: 7,
									borderWidth: 2,
									background: '#ffffff',
									color: 'rgba(0,0,0,0)',
									borderColor: innerColor[i],
									shadowColor: innerColor[i]
								},
								// selected: i === 0
							})
						}

						var seriesOption = [

							{
								name: '',
								type: 'gauge',
								splitNumber: 30, //刻度数量
								min: 0,
								max: 100,
								radius: '76%', //图表尺寸
								center: ['50%', '50%'],
								startAngle: 90,
								endAngle: -269.9999,
								axisLine: {
									show: false,
									lineStyle: {
										width: 0,
										shadowBlur: 0,
										color: [
											[0, '#0dc2fe'],
											[1, '#rgba(243, 243, 243,.5)']
										]
									}
								},
								axisTick: {
									show: true,
									lineStyle: {
										color: {
											type: 'linear',
											x: 0,
											y: 0,
											x2: 0,
											y2: 1,
											colorStops: [{
												offset: 0,
												color: '#0dc2fe' // 0% 处的颜色
											}, {
												offset: 1,
												color: '#051349' // 100% 处的颜色
											}],
											global: false // 缺省为 false
										},
										width: 2
									},
									length: 15,
									splitNumber: 5
								},
								splitLine: {
									show: true,
									length: 10,
									lineStyle: {
										color: {
											type: 'linear',
											x: 0,
											y: 0,
											x2: 0,
											y2: 1,
											colorStops: [{
												offset: 0,
												color: '#0dc2fe' // 0% 处的颜色
											}, {
												offset: 1,
												color: '#051349' // 100% 处的颜色
											}],
											global: false // 缺省为 false
										}
									}
								},
								axisLabel: {
									show: false
								},
								pointer: { //仪表盘指针
									show: 0,
								},
								detail: {
									show: false,
								},
							},
							{
								name: '分类',
								type: 'pie',
								radius: ['0%', '40%'],
								center: ['50%', '50%'],
								label: {
									position: 'inner',
									formatter: function(params) {
										return params.name;
									}

								},
								hoverOffset: 0,
								selectedMode: true,
								selectedOffset: 10,
								itemStyle: {
									borderColor: 'black',
									borderWidth: 2,
								},
								data: dataType
							},
							{
								name: '',
								type: 'pie',
								radius: ['50%', '65%'],
								center: ['50%', '50%'],
								hoverAnimation: false,
								itemStyle: {
									normal: {
										borderWidth: 2,
										borderColor: '#020d44',
										label: {
											show: true,
											position: 'outside',
											color: '#fff',
											fontSize: 12,
											formatter: function(params) {
												if (params.name !== '') {
													return '{name|' + params.name + '}\n' +
														'{value|' + params.value +
														'人}' + '\n' + '{percents|' + params
														.percent + '%}';
												} else {
													return '';
												}
											},
											rich: {
												name: {
													color: "#ffffff",
													fontSize: 12,
													align: 'left',
													padding: [2, 5, 2, 0],
												},
												value: {
													color: '#ffffff',
													fontSize: 14,
													padding: [2, 5, 2, 0],
													align: 'left'
												},
												percents: {
													color: '#ffffff',
													fontSize: 14,
													padding: [2, 5, 2, 0],
													align: 'left'
												},
											}
										},
										labelLine: {
											length: 20,
											length2: 20,
											show: true,
											lineStyle: {
												color: 'rgba(102, 121, 157, 1)'
											}
										}
									}
								},
								data: dataConsump
							}
						];

						var option4 = {
							color: color,
							tooltip: {
								show: false
							},
							legend: {
								show: false,
								icon: "circle",
								orient: 'horizontal',
								// x: 'left',
								data: ['其他', '用餐支出', '用水支出', '用电支出'],
								right: 340,
								bottom: 150,
								align: 'right',
								textStyle: {
									color: "#C1F6FF"
								},
								itemGap: 20
							},
							angleAxis: {
								axisLine: {
									show: false
								},
								axisLabel: {
									show: false
								},
								splitLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								min: 0,
								max: 100,
								boundaryGap: ['0', '100'],
								startAngle: 90
							},
							radiusAxis: {
								type: 'category',
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								data: ['a', 'b', 'c', 'd'],
								z: 10
							},
							polar: {
								radius: '70%'
							},
							toolbox: {
								show: false
							},
							series: [...seriesOption]
						}

						this.myChart4 = echarts.init(dom4);
						this.myChart4.setOption(option4)
					})
				})
			},
			getResidentAge() {
				// 获取居民年龄段人数统计信息接口
				api.getResidentAge().then(res => {
					this.$nextTick(r => {
						var dom1 = document.getElementById("box1");
						let data = {
							one: 224,
							two: 5514,
							three: 3627,
							four: 10734,
							five: 2067,
							six: 24,
						};
						// 复制代码
						const chartData = [{
								value: res.seventeen,
								name: "0-17岁",
								itemStyle: {
									shadowBlur: 20,
									shadowColor: "#3C4039",
									shadowOffsetx: 25,
									shadowOffsety: 20,
									color: "#ED4545",
								},
							},
							{
								value: res.twentyNine,
								name: "18-29岁",
								itemStyle: {
									shadowBlur: 20,
									shadowColor: "#0C3E4E",
									shadowOffsetx: 25,
									shadowOffsety: 20,
									color: "#F2BD42",
								},
							},
							{
								value: res.fortyNine,
								name: "30-49岁",
								itemStyle: {
									shadowBlur: 20,
									shadowColor: "#043E39",
									shadowOffsetx: 25,
									shadowOffsety: 20,
									color: "#539D5A",
								},
							},
							{
								value: res.sixtyNine,
								name: "50-69岁",
								itemStyle: {
									shadowBlur: 20,
									shadowColor: "#043E39",
									shadowOffsetx: 25,
									shadowOffsety: 20,
									color: "#0068F4",
								},
							},
							{
								value: res.seventy,
								name: "70以上",
								itemStyle: {
									shadowBlur: 20,
									shadowColor: "#043E39",
									shadowOffsetx: 25,
									shadowOffsety: 20,
									color: "#5BA6B4",
								},
							}
						];
						const sum = chartData.reduce((per, cur) => per + cur.value, 0);
						const gap = (1 * sum) / 100;
						let pieData1 = [];
						const gapData = {
							name: "",
							value: gap,
							itemStyle: {
								color: "transparent",
							},
						};

						for (let i = 0; i < chartData.length; i++) {
							// 第一圈数据
							pieData1.push({
								...chartData[i],
							});
							pieData1.push(gapData);
						}
						let option = {
							tooltip: {
								title: '详情',
								trigger: 'item',
								color: '#333333',
								//						formatter: '{a} <br/>{b}: {c} ({d}%)'
								formatter: (params) => {
									if (params.name) {
										var res = '<p style="color: #333;line-height: 1">' + params
											.seriesName +
											'</p><h3 style="font-size:14px;line-height:14px;margin-top:13px;color:#333;"><span style="width:6px;height:6px;border-radius:50%;background:#066BC8;margin-top: -6x;display: inline-block;margin: 3px;"></span>' +
											params.data.name + ':&nbsp;&nbsp;&nbsp;' + params.data
											.value + '人</h3>'
									}
									return res
								}
							},
							title: {
								show: true,
								text: res.total,
								subtext: "总数",
								x: "48.5%",
								y: "53%",
								itemGap: 6,
								textStyle: {
									color: "#fff",
									fontSize: 22,
									fontWeight: "400",
									lineHeight: 25
								},
								subtextStyle: {
									color: "#fff",
									fontSize: 14,
									fontWeight: "400",
									lineHeight: 14
								},
								textAlign: "center",
							},
							legend: {
								textStyle: {
									color: "#fff",
									fontSize: "12px",
								},
								top: "6%",
								left: "5%",
								itemGap: 20,
								itemHeight: 14,
								itemWidth: 24,
								data: ['0-17岁', '18-29岁', '30-49岁', '50-69岁', '70以上'],
							},
							series: [{
									name: "详情",
									type: "pie",
									roundCap: true,
									radius: ["50%", "66%"],
									center: ["50%", "60%"],
									data: pieData1,
									labelLine: {
										length: 8,
										length2: 16,
										lineStyle: {
											width: 1,
										},
									},
									label: {
										show: true,
										fontFamily: "ysbth",
										position: "outside",
										padding: [0, -4, 0, -4],
										formatter(params) {
											if (params.name === "") {
												return "";
											}
											return `${params.percent.toFixed(0)}%`;
										},
										color: "#fff",
										fontSize: "12px",
										lineHeight: 10,
									},
								},
								{
									type: "pie",
									radius: ["42%", "44%"],
									center: ["50%", "60%"],
									animation: false,
									hoverAnimation: false,
									data: [{
										value: 100,
									}, ],
									label: {
										show: false,
									},
									itemStyle: {
										normal: {
											color: "#3BC5EF",
										},
									},
								},
								{
									name: "",
									type: "pie",
									startAngle: 90,
									radius: "42%",
									animation: false,
									hoverAnimation: false,
									center: ["50%", "60%"],
									itemStyle: {
										normal: {
											labelLine: {
												show: false,
											},
											color: new echarts.graphic.RadialGradient(0.5, 0.5, 1,
												[{
														offset: 1,
														color: "rgba(50,171,241, 0)",
													},
													{
														offset: 0.5,
														color: "rgba(50,171,241, .4)",
													},
													{
														offset: 0,
														color: "rgba(55,70,130, 0)",
													},
												]),
											shadowBlur: 60,
										},
									},
									data: [{
										value: 100,
									}, ],
								},
							],
						};
						this.myChart1 = echarts.init(dom1);
						this.myChart1.setOption(option)
					})
				})
			},
			hides() {
				this.flag1 = false
				this.flag2 = false
				this.flag3 = false
				this.flag4 = false
				this.flag5 = false
			},
			tabbars(index) {
				this.current = index;
				this.$nextTick(() => {
					this.myChart22.resize()
				});
			},
			close() {
				this.flag1 = false
				this.flag2 = false
				this.flag3 = false
				this.flag4 = false
				this.flag5 = false
			},
			change(src) {
				this.flag1 = false
				this.flag2 = false
				this.flag3 = false
				this.flag4 = false
				this.flag5 = false
				if (src == 'flag4') {
					this.getdispose('DISPOSE')
				} else if (src == 'flag5') {
					this.getdispose('NO_DISPOSE')
				}else if (src == 'flag1') {
					this.getBracelets('HIGH_PRESSURE')
				}else if (src == 'flag2') {
					this.getBracelets('LOW_VOLTAGE')
				}else if (src == 'flag3') {
					this.getBracelets('HEART_RATE')
				}
				this[src] = true
			},
			// 手环报警信息列表
			getBracelets(type) {
				api.getBracelets({
					type
				}).then(r => {
					console.log(r)
					this.Dispose = r
				})
			},
			// 烟感处理信息列表
			getdispose(type) {
				api.getDispose({
					type
				}).then(r => {
					this.Dispose = r
				})
			},
			handler({
				map
			}) {
				let that = this;
				that.map = map;
				map.setMapStyleV2({
					styleId: "b9f2b05acd4bd998921f5dd49e733e23"
				})
			},
			initChart() {
				api.getOldType().then(r => {
					this.$nextTick(() => {
						var dom3 = document.getElementById("box3");
						//333
						var datas = r.oldTypeDTOList
						var placeHolderStyle = {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								},
								color: 'rgba(0, 0, 0, 0)',
								borderColor: 'rgba(0, 0, 0, 0)',
								borderWidth: 0
							}
						};
						var data1s = [];
						var data2s = [];
						var colorIn = ['#E6904E', '#21A600', '#6671D1', '#EA6D6C', "#ffaaff", "#aa55ff"];
						var colorOut = ['#81614A', '#136671', '#354B88', '#CE7170', "rgba(242,170,255,.6)",
							"rgba(170,85,255,.6)"
						];
						for (var i = 0; i < datas.length; i++) {
							data1s.push({
								data: datas[i].value,
								value: datas[i].value,
								name: datas[i].type,
								itemStyle: {
									normal: {
										color: colorOut[i]
									}
								}
							});
							data2s.push({
								data: datas[i].value,
								value: datas[i].value,
								name: datas[i].type,
								label: {
									color: '#ffffff'
								},
								itemStyle: {
									normal: {
										color: colorIn[i]
									}
								}
							});
						}
						var dataArrs = [];
						for (var i = 0; i < 100; i++) {
							if (i % 2 === 0) {
								dataArrs.push({
									name: (i + 1).toString(),
									value: 5,
									itemStyle: {
										normal: {
											color: "#0A1A43",
											borderWidth: 0,
											borderColor: "rgba(0,0,0,0)"
										}
									}
								})
							} else {
								dataArrs.push({
									name: (i + 1).toString(),
									value: 20,
									itemStyle: {
										normal: {
											color: "#2ac9e1",
											borderWidth: 0,
											borderColor: "rgba(0,0,0,0)"
										}
									}
								})
							}

						}
						var option3 = {
							tooltip: {
								title: '详情',
								trigger: 'item',
								formatter: '{a} <br/>{b}: {c} ({d}%)'
							},
							legend: {
								textStyle: {
									color: "#fff",
									fontSize: "12px",
								},
								top: "6%",
								left: "5%",
								itemGap: 15,
								itemHeight: 14,
								itemWidth: 24,
								data: datas.map((v) => {
									return v.type
								})
							},
							series: [{
									type: 'pie',
									zlevel: 3,
									silent: true,
									center: ['50%', '55%'],
									radius: ['55%', '57%'],
									label: {
										normal: {
											show: false
										},
									},
									labelLine: {
										normal: {
											show: false
										}
									},
									data: dataArrs
								},
								{
									name: '详情',
									type: 'pie',
									selectedMode: 'single',
									center: ['50%', '55%'],
									radius: [0, '50%'],
									label: {
										formatter: '{d}%',
										position: 'inner',
									},
									data: data2s
								},
								{
									name: '详情',
									type: 'pie',
									radius: ['62%', '66%'],
									center: ['50%', '55%'],
									labelLine: {
										normal: {
											length: 10,
											length2: 14,
										}
									},
									label: {
										show: false,
										position: 'outer',
										alignTo: 'labelLine',
										// ·圆点

										backgroundColor: 'none',
										borderRadius: 2.5,
										padding: [2.5, -2.5, 2.5, -2.5],
										formatter: '{a|{b}：}{b|{c}}',
										rich: {
											a: {
												padding: [0, 0, 0, 10],
												color: '#fff'
											},
											b: {
												padding: [0, 10, 0, 0],
												color: '#fff'
											}
										}
									},

									data: data1s
								}
							]
						};

						this.myChart3 = echarts.init(dom3);

						this.myChart3.setOption(option3)
					});
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	.content .boxs .main_midden .ycs {}
</style>